<template>
  <!-- data-source绑定的是获取后台数组的属性 -->
  <a-table :columns="columns" :data-source="arr">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          序号
        </span>
      </template>
      <template v-if="column.key === 'block'">
        <span>
          就诊状态
        </span>
      </template>

      <template v-if="column.key === 'type'">
        <span>
          患者编号
        </span>
      </template>
      <template v-if="column.key === 'Xinkainame'">
        <span>
          患者姓名
        </span>
      </template>
      <template v-if="column.key === 'hrg'">
        <span>
          性别
        </span>
      </template>
      <template v-if="column.key === 'consume'">
        <span>
          年龄
        </span>
      </template>
      <template v-if="column.key === 'balance'">
        <span>
          手机号码
        </span>
      </template>
      <template v-if="column.key === 'save'">
        <span>
          门诊类型
        </span>
      </template>
      <template v-if="column.key === 'score'">
        <span>
          科室
        </span>
      </template>
      <template v-if="column.key === 'over'">
        <span>
          最后更新时间
        </span>
      </template>
    </template>
    <!-- 自定义内容 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <span style="color:#65befc ;">
          {{ record.name }}
        </span>
      </template>
      <template v-else-if="column.key === 'block'">
        <span style="color:#b1eed8 ;">
          {{ record.block }}
        </span>
      </template>
      <template v-else-if="column.key === 'type'">
        <span style="color:#a3a3a3 ;">
          {{ record.type }}
        </span>
      </template>
      <template v-else-if="column.key === 'XinKainame'">
        <span style="color:#a3a3a3 ;">
          {{ record.XinKainame }}
        </span>
      </template>
      <template v-else-if="column.key === 'number'">
        <span style="color:#a3a3a3 ;">
          {{ record.number }}
        </span>
      </template>
      <template v-else-if="column.key === 'consume'">
        <span style="color:#a3a3a3 ;">1
          {{ record.consume }}
        </span>
      </template>
      <template v-else-if="column.key === 'balance'">
        <span style="color:#a3a3a3 ;">
          {{ record.balance }}
        </span>
      </template>
      <template v-else-if="column.key === 'save'">
        <span style="color:#a3a3a3 ;">
          {{ record.save }}
        </span>
      </template>
      <template v-else-if="column.key === 'score'">
        <span style="color:#a3a3a3 ;">
          {{ record.score }}
        </span>
      </template>
      <template v-else-if="column.key === 'over'">
        <span style="color:#a3a3a3 ;">
          {{ record.over }}
        </span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, ref, toRaw, watchEffect, onMounted, onBeforeUnmount } from 'vue';
import { SmileOutlined, ClockCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
type Key = string | number;
interface DataType {
  key: Key;
  name: number;
  block: string,
  type: string,
  Xinkainame: string,
  hrg: string,
  consume: number,
  balance: number,
  save: string,
  score: any,
  over: string,
}
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '就诊状态',
    dataIndex: 'block',
    key: 'block'
  },
  {
    title: '患者编号',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '患者姓名',
    dataIndex: 'Xinkainame',
    key: 'Xinkainame'
  },
  {
    title: '性别',
    dataIndex: 'hrg',
    key: 'hrg'
  },
  {
    title: '年龄',
    dataIndex: "consume",
    key: 'consume'
  },
  {
    title: '手机号码',
    dataIndex: 'balance',
    key: 'balance'
  },
  {
    title: '门诊类型',
    dataIndex: 'save',
    key: 'save'
  },
  {
    title: '科室',
    dataIndex: 'score',
    key: 'score'
  },
  {
    title: '最后更新时间',
    dataIndex: 'over',
    key: 'over'
  },
];
const data: DataType[] = [];
for (let i = 0; i < 5; i++) {
  data.push({
    key: 1,
    name: 0,
    block: '待就诊',
    type: '0003445',
    Xinkainame: '王冕',
    hrg: '男',
    consume: 12,
    balance: 13399900223,
    save: '初诊',
    score: '全科',
    over: '2019-11-12 11:08:11',

  });
}

export default defineComponent({
  components: {
    SmileOutlined,
    ClockCircleOutlined,
    CheckOutlined, CloseOutlined
  },
  props: ['arr'],
  setup(props, ctx) {
    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
    };

    return {
      data,
      columns,
      onSelectChange,
    };
  },
});
</script>
<style></style>
